<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_mapQueryByGeometry"></title>
    <style>
        #toolbar {
          position: absolute;
          top: 50px;
          right: 10px;
          text-align: center;
          z-index: 100;
          border-radius: 4px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary">
  <div class='panel-heading'>
      <h5 class='panel-title text-center' data-i18n="resources.title_queryByGeometry"></h5></div>
  <div class='panel-body content'>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_point" onclick="query('point')"/>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_line" onclick="query('line')"/>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_rectangle" onclick="query('rectangle')"/>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_polygon" onclick="query('polygon')"/>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
  </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" include="draw,mapboxgl-draw-rectangle-drag" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + "/iserver/services/map-world/rest/maps/World";
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
    var geo;
    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }],
        },
        center: [0, 0],
        maxZoom: 18,
        zoom: 2
    });
    map.addControl(new mapboxgl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

    initDraw();
    function initDraw() {
        const modes = MapboxDraw.modes;
        modes.simple_select.onDrag = function (state, e) {
          return;
        };
        draw = new MapboxDraw({
            displayControlsDefault: false,
            modes: {
                ...modes,
                draw_rectangle_drag: mapboxGLDrawRectangleDrag
            }
        });
        map.addControl(draw, 'top-left');
        map.on('draw.create', drawCompleted);
    }

    function query(type) {
      clearFeatures();
      var drawTypeMap = {
          polygon: 'draw_polygon',
          line: 'draw_line_string',
          point: 'draw_point',
          rectangle: 'draw_rectangle_drag'
      }
      draw.changeMode(drawTypeMap[type]);
    }

    function drawCompleted(e) {
        geo = e.features[0];
        var param = new mapboxgl.supermap.QueryByGeometryParameters({
            queryParams: {name: "Countries@World"},
            geometry: geo
        });

        queryService = new mapboxgl.supermap.QueryService(url).queryByGeometry(param).then(function (serviceResult) {
            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
            var features = recordsets && recordsets[0] && recordsets[0].features;
            map.addLayer({
                "id": "fills",
                "type": "fill",
                'paint': {
                  'fill-outline-color': 'red',
                  'fill-color': 'rgba(0, 0, 255, 0.1)'
                },
                "source": {
                    "type": "geojson",
                    "data": features
                }
            });
        });
    }

    function clearFeatures() {
      if (geo) {
        draw.delete(geo.id);
        geo = null;
      }
      if (map.getLayer('fills')) {
        map.removeLayer('fills');
        map.removeSource('fills');
      }
    }
</script>
</body>
</html>